<template>
	<view class="beijingse">
		<!-- 头部 -->
		<view class="header">
			<view class="ershil">
				销售总额
			</view>
			<view class="zx margin_top2">
				{{priceAll?priceAll:'0.00'}}
			</view>
		</view>
		<!-- 内容 -->
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="ffffff radius width48">
					<u-search 
						shape="square" 
						placeholder="店铺筛选" 
						inputAlign="center"
						v-model="dpsx"
						:showAction="false"
						bgColor="#ffffff"
						searchIconSize="40rpx"
						height="77rpx"
					></u-search>
				</view>
				<view class="ffffff radius width48">
					<u-search
						shape="square" 
						placeholder="商品筛选" 
						inputAlign="center"
						v-model="spsx"
						:showAction="false"
						bgColor="#ffffff"
						searchIconSize="40rpx"
						height="77rpx"
					></u-search>
				</view>
			</view>
			<view class="flexbetween margin_top2" @click="zdysj">
				<!-- 时间 -->
				<view class="shijianbtn width48" @click="zshijian">{{startime}}</view>
				<view class="shijianbtn width48" @click="yshijian">{{endtime}}</view>
			</view>
			<u-datetime-picker :show="zshow" @confirm="zconfirm" v-model="value1" mode="date"
				@cancel="zshow= false"></u-datetime-picker>
			<u-datetime-picker :show="yshow" @confirm="yconfirm" v-model="value2" mode="date" @cancel="yshow= false"
				:minDate="mindate"></u-datetime-picker>
			<view class="btn flexcenter">
				<view class="bigbtn margin_top resert" @click="close">重置</view>
				<view class="bigbtn margin_top" @click="init()">提交</view>
			</view>
			<view class="list">
				<view class="ffffff radius margin_top mainpadding  flexbetween" v-if="list.data.length>0" v-for="item in list.data" :key="item.id">
					<view class="detailBox">
						<view class="time">
							{{item.createtime_text}}
						</view>
						<view class="flexbetween margin_top">
							<image :src="item.image_text" mode=""></image>
							<view class="detail">
								<view class="name nostrongtext yhxiank">
									{{item.title}}
								</view>
								<view class="type">
									{{item.difference}}
								</view>
								<view class="flexbetween nostrongtext">
									<view class="price ershil">
										¥{{item.price}}
									</view>
									<view class="num">x{{item.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="margin_top" v-if="list.data.length==0">
					<image class="image" src="../../static/image/system/zwt.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currenttabtow: 0,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				
				dpsx:'',
				spsx:'',
				
				personInfo:'',
				
				priceAll:'',
				
				// 时间
				startime: "请输入开始时间",
				endtime: "请输入结束时间",
				// 数据列表
				show: false,
				mindate: "",
				//开始时间
				zshow: false,
				value1: Number(new Date()),
				//结束
				yshow: false,
				value2: Number(new Date()),
			}
		},
		onLoad(option){
			this.personInfo=option
			console.log(option);
		},
		onShow(){
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/user/userShopdata', 'POST', {
					page: page || 1,
					limit: _this.limit,
					type:this.personInfo.user_sf_id==3?1:this.personInfo.user_sf_id==4?2:'',
					start_time:this.startime=='请输入开始时间'?'':this.startime,
					end_time:this.endtime=='请输入结束时间'?'':this.endtime,
					search_shop_name:this.dpsx,
					search_title:this.spsx
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.data.forEach(item => {
							this.$set(item, "is_zk", false)
						})
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				
				httpRequest.request('/api/user/userShopdataTotal', 'POST', {
					page: page || 1,
					limit: _this.limit,
					type:this.personInfo.user_sf_id==3?1:this.personInfo.user_sf_id==4?2:'',
					start_time:this.startime=='请输入开始时间'?'':this.startime,
					end_time:this.endtime=='请输入结束时间'?'':this.endtime,
					search_shop_name:this.dpsx,
					search_title:this.spsx
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.priceAll=res.data.total_price
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
			
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			zdysj() {
				this.selecttime = 0
			},
			// 开始时间
			zconfirm(e) {
				console.log(e)
				this.mindate = e.value
				this.startime = this.date(e.value)
				this.zshow = false
			},
			zshijian() {
				this.zshow = true
			},
			//结束时间
			yconfirm(e) {
				console.log(e)
				this.endtime = this.date(e.value)
				this.yshow = false
			},
			yshijian() {
				if (this.mindate == "") {
					httpRequest.toast("请选择开始时间")
					return
				}
				this.yshow = true
			},
			close() {
				this.startime='请输入开始时间';
				this.endtime='请输入结束时间';
				this.dpsx='';
				this.spsx='';
				this.init()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.header{
		padding: 41rpx 0;
		text-align: center;
		background-image: url("../../static/image/system/fubg.png");
		.ershil{
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 30rpx;
		}
		.zx{
			font-size: 68rpx;
			font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
	
	.width48{
		position: relative;
		width: 48%;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #999999;
		line-height: 30rpx;
		text-align: center;
		.search{
			width: 27rpx;
			height:27rpx;
			position: absolute;
			left: 30rpx;
			top:50%;
			transform: translateY(-50%);
			background-image: url("../../static/image/system/fgss.png");
			background-size: cover;
		}
	}
	.padding{
		padding: 25rpx 0;
	}
	
	.shijianbtn {
		padding: 26rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.resert{
		margin-right: 4%;
		color:#FAB536;
		background-color: transparent;
		border:1px solid #FAB536;
	}
	.bigbtn{
		width:auto;
		height:auto;
		padding:20rpx 70rpx;
	}
	image{
		width:124rpx;
		height:124rpx;
		margin-right: 25rpx;
		border-radius: 14rpx;
	}
	.name{
		font-size: 28rpx;
		-webkit-line-clamp: 1; //行数
		line-clamp: 1;
	}
	.price{
		color:#f00;
	}
	
	.time{
		font-size: 28rpx;
	}
	.type{
		margin: 10rpx 0;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #999999;
		line-height: 28rpx;
	}
	.detailBox{
		width: 100%;
	}
	.detail{
		flex-grow: 2;
	}
	.num{
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		color: #999999;
		line-height: 30rpx;
	}
	.margin_top .image{
		width: 406rpx;
		height: 406rpx;
		margin: 0 auto;
		display: block;
	}
</style>